<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<base th:href="@{/}"><!-- 不用base就使用th:src="@{/js/jquery.min.js} -->
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>天天生鲜-用户中心</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<script src="js/jquery-1.12.4.min.js"></script>
</head>
<body>
	<div class="header_con">
		<div class="header">
			<div class="welcome fl">欢迎来到天天生鲜!</div>
			<div class="fr">
				<div class="login_info fl">
					欢迎您：<em>张 山</em>
				</div>
				<div class="login_btn fl">
					<a href="login.html">登录</a>
					<span>|</span>
					<a href="register.html">注册</a>
				</div>
				<div class="user_link fl">
					<span>|</span>
					<a href="user_center_info.html">用户中心</a>
					<span>|</span>
					<a href="cart.html">我的购物车</a>
					<span>|</span>
					<a href="user_center_order.html">我的订单</a>
				</div>
			</div>
		</div>		
	</div>

	<div class="search_bar clearfix">
		<a href="index.html" class="logo fl"><img src="images/logo.png"></a>
		<div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;商家中心</div>
		<div class="search_con fr">
			<input type="text" class="input_text fl" name="" placeholder="搜索商品">
			<input type="button" class="input_btn fr" name="" value="搜索">
		</div>		
	</div>

	<div class="main_con clearfix">
		<div class="left_menu_con clearfix">
			<h3>商家中心</h3>
			<ul>
				<li><a href="/toSellerCenterInfo" >· 店铺信息</a></li>
				<li><a href="/toGoodsInfo" class="active">· 商品信息</a></li>
				<li><a href="/seller/QueryOrder">· 订单信息</a></li>
				<li><a href="/seller/comments">· 评论</a></li>
			</ul>
		</div>
		<div class="right_content clearfix">

				<span class="button">
				  <input type="checkbox" id="allChecked" onclick="checkBox()" >全选
				  <button id="addBtn" >新增商品</button>
				  <button id="batchBtn" >批量删除</button>
				</span>
				<table>
				      
				   <tr class="goods_title">
					   <th ></th>
				     <th class="goods_name">商品名</th>
					   <th class="goods_count">上架时间</th>
				     <th class="goods_introduce">商品介绍</th>
				     <th class="goods_price">定价（元）</th>
				     <th class="goods_image">商品图片</th>
				     <th class="goods_count">商品数量</th>

				     <th class="goods_oper" colspan="2">操作</th>
				   </tr>

				   <tr th:each="good:${pageInfo.getList()}" class="goods_detail" >
					   <td class="goods_input"><input type="checkbox" onclick="oneCk()" name="ck1" th:value="${good.id}"></td>
					   <td th:text="${good.name}">红米Note5A</td>
					   <td th:text="${#dates.format(good.createTime,'yyyy-MM-dd HH:mm:ss')}">1</td>
				     <td class="goods_input" th:text="${good.goodDetail}"> </td>
					   <td th:text="${good.newPrice}">20000</td>
					   <td class="goods_image">
						   <input type="image" th:src="@{'/images/'+${good.picture}}" />

					   </td>
				     <td th:text="${good.store}">屏幕大，分辨率高</td>



				     <td class="button_oper">
				       <button th:onclick="'updateGood('+${good.id}+','+${pageInfo.pageNum}+')'">编辑</button>
				       <button  th:onclick="'deleteGood('+${good.id}+','+${pageInfo.pageNum}+')'">删除</button>
				     </td>
				   </tr>
<!--				   <tr class="goods_detail">-->
<!--				     <td class="goods_input"><input type="checkbox"></td>-->
<!--				     <td>红米Note5A</td>-->
<!--				     <td>屏幕大，分辨率高</td>-->
<!--				     <td>20000</td>-->
<!--				     <td>图片</td>-->
<!--				     <td>1</td>-->
<!--				     <td class="button_oper">-->
<!--				       <button>编辑</button>-->
<!--				       <button>删除</button>-->
<!--				     </td>-->
<!--				   </tr>-->
				</table>
				<div class="pagenation" th:if="${pageInfo.size}>0">
					<a th:href="'toGoodsInfo?pageNum='+${pageInfo.prePage}">上一页</a>
					<a th:each="data:${#numbers.sequence(1,pageInfo.pages)}" th:text="${data}"
					   th:href="'toGoodsInfo?pageNum='+${data}"
					   th:class="${data==pageInfo.pageNum}?'active':''"></a>
<!--					<a href="#" class="active">1</a>-->
<!--					<a href="#">2</a>-->
<!--					<a href="#">3</a>-->
<!--					<a href="#">4</a>-->
<!--					<a href="#">5</a>-->
					<a th:href="'toGoodsInfo?pageNum='+${pageInfo.nextPage}">下一页></a>
				</div>
		</div>
	</div>



	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>
	
</body>
	<script>
		$(function (){
			$("#addBtn").click(function (){
				location.href="/toAddGoods";
			});
			$("#batchBtn").click(function (){
				var checked = $("input[name='ck1']:checked");
				if(checked.length == 0)
				{
					alert("请选择要删除的商品");
					return;
				}
				if(confirm("确定要删除这"+checked.length+"件商品?")){
					var str = "";
					$.each(checked,function (i,data){
						var id = $(data).val();
						str = str+id+",";
					})
					location.href="/goodstable/batchDeleteGood?goodIds="+str;
				}

			});
		})
		function updateGood(obj,pageNum){
			var goodId = parseInt(obj);
			location.href="/goodstable/toUpdateGoodIndex?id="+goodId+"&pageNum="+pageNum;
		}
		function deleteGood(obj,pageNum){
			var goodId = parseInt(obj);
			location.href="/goodstable/deleteGoodById?id="+goodId+"&pageNum="+pageNum;
		}
		function checkBox(){
			var allCheck = $("#allChecked");
			var b = allCheck.prop("checked");
				var allCheck = $(":checkbox");
				$.each(allCheck,function (i,data){
					$(data).prop("checked",b);
				});
		}
		function oneCk(){
			var checkLen = $("input[name='ck1']:checked").length;
			var chNum = $("input[name='ck1']").length;
			if(checkLen == chNum){
				$("#allChecked").prop("checked",true);
			}else {
				$("#allChecked").prop("checked",false);
			}

		}
	</script>
</html>
<style>
  .button{
  margin-left: 20px;
  }
  .button button{
    margin: 0 15px 10px 10px;
    background-color: orangered;
    color: white;
    width: 130px;
    height: 40px;
    border: 0;
    border-radius: 5%;
	
  }
  .button button:hover{
	  cursor: pointer;
  }
  .button_oper button:hover{
	  cursor: pointer;
  }
  table{
    border-collapse: collapse;
  }
  table tr:nth-child(2n-1)
{
    background: rgb(245, 245, 245);
}
  table tr th,table tr td{
    border: 1px solid rgb(228, 228, 228); 
  }

  .goods_title{
    height:30px;
    color: black;
  }
.goods_input{
  width: 50px;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.goods_detail{
  height: 50px;
}
.goods_image input{
	width: 100%;
	height: 50px;
}
.goods_name{
  width: 120px;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.goods_introduce{
  width: 400px;
}
.goods_price{
  width: 100px;
}
.goods_image{
  width: 80px;
}
.goods_count{
  width: 80px; 
}

.goods_oper{
  width: 150px;
}
.button_oper button{
  width: 60px;
  height: 30px;
  color: #ffffff;
  border: 0;
  border-radius: 5px;
}
.button_oper button:nth-child(1){
  background-color: #5ABFDD;
}
.button_oper button:nth-child(2){
  background-color: orange;
}
</style>